<template>
  <div class="login-title">
    <h2 class="title" :style="{ margin: 'auto' }">东江公司-AI安防平台</h2>
  </div>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
    <el-form-item label prop="username">
      <el-input
        placeholder="请输入用户名"
        autocomplete="on"
        style="position: relative"
        v-model="ruleForm.username"
        @keyup.enter="submitForm(ruleFormRef)"
      >
        <template #prefix>
          <el-icon>
            <User />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label prop="password">
      <el-input
        placeholder="请输入密码"
        autocomplete="on"
        @keyup.enter="submitForm(ruleFormRef)"
        v-model="ruleForm.password"
        :type="passwordType"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <el-icon>
              <Key />
            </el-icon>
          </el-icon>
        </template>
        <template #suffix>
          <div class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </div>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button
        :loading="loading"
        class="login-btn"
        type="primary"
        @click="submitForm(ruleFormRef)"
      >登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script  setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import {ElMessage} from 'element-plus'
import { User, Key, Message } from "@element-plus/icons-vue";

const router = useRouter();
const ruleFormRef = ref();
const passwordType = ref("password");
const loading = ref(false);

const rules = reactive({
  password: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  username: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

// 表单数据
const ruleForm = reactive({
  username: "admin",
  password: "admin123!"
});

// 显示密码图标
const showPwd = () => {
  passwordType.value = passwordType.value === "password" ? "" : "password";
};

const submitForm = formEl => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      if (ruleForm.username === "admin" && ruleForm.password === "admin123!") {
        loading.value = true;
        // 登录
        setTimeout(() => {
          router.push({
            path: "/main"
          });
          loading.value = true;
        }, 1000);
      } else {
        ElMessage.warning("账号密码错误");
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
@import "../index.less";
</style>
